<template>
    <Modal :mask-closable="false" v-model="visible" :title="title">
        <Form ref="form" v-if="visible" class="formList" :model="form" label-position="top" :rules="rules">

            <FormItem label="计划开始时间-计划结束时间" required prop="planBeginTime">
                <DatePicker
                format="yyyy-MM-dd"
                type="datetimerange" v-model="form.planBeginTime" placeholder="请选择起始时间和结束时间" />
            </FormItem>
            <FormItem label="计划号" required prop="no">
                <Input type="text" v-model="form.no" placeholder="请输入计划号" class="inputBorder"></Input>
            </FormItem>
            <FormItem label="工厂/车间" required prop="organizationId">
               
             <Cascader clearable :data="lineList" v-model="form.organizationId" placeholder="请选择" change-on-select></Cascader>
            </FormItem>
            <FormItem label="计划状态" required prop="status">
                <Select v-model="form.status" placeholder="请输入计划状态">
                    <Option v-for="(item, index) in statusData" :key="index.value" :value="item.value"
                        :label="item.label"></Option>
                </Select>

            </FormItem>
            <FormItem label="实际开始时间-实际结束时间" required prop="actualBeginTime">
                <DatePicker type="datetimerange"
                format="yyyy-MM-dd"
                v-model="form.actualBeginTime" placeholder="请选择实际时间和实际结束时间" />
            </FormItem>
        
            <FormItem label="计划类型" required prop="type">
                <Select v-model="form.type" placeholder="请输入计划类型">
                    <Option v-for="(item, index) in typeData" :key="index.value" :value="item.value"
                        :label="item.label"></Option>
                </Select>

            </FormItem>
        </Form>
        <div slot="footer" v-if="visible">
            <Button type="default" @click="closeModal">取消</Button>
            <Button type="primary" @click="handleSubmit('form')">确定</Button>
        </div>
    </Modal>
</template>

<script>
export default {
    name: "CreateOrUpdateModal",
    props: {
        visible: Boolean,
        form: Object,
        title: String,
        handleAddSubmit: Function,
        // lineList: Array,
        statusData: Array,
        typeData: Array,
    },
    data() {
        return {
            rules: {
                productName: [
                    { required: true, message: '请输入计划号', trigger: 'blur' }
                ],
                productCode: [
                    { required: true, message: '请输入产品编码', trigger: 'blur' }
                ],
                materialId: [
                    { required: true, message: '请选择物料', trigger: 'blur' }
                ], category: [
                    { required: true, message: '请选择产品类别', trigger: 'blur' }
                ],
            },
            lineList:[{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]}]
        
        };
    },
    methods: {
        closeModal() {
            this.$emit("update:visible", false);
        },
        handleSubmit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.handleAddSubmit(formName);
                }
            })

        },
    },
};
</script>

<style scoped>
.formList {}
</style>